import { useState } from "react"

function App() {
    const [num, setNum] = useState(0)
    const [symbol, setSymbol] = useState(false)
    const [terminal, setTerminal] = useState(0)
    const [formula, setFormula] = useState('')
    const [btns, setBtns] = useState([
        {key: 'AC', value: 'AC', style: 'calculator-control-button border-first dark'},
        {key: '+/-', value: '+/-', style: 'calculator-control-button dark'},
        {key: '%', value: '%', style: 'calculator-control-button dark'},
        {key: '/', value: '/', style: 'calculator-control-button orange'},
        {key: '7', value: 7, style: 'calculator-control-button border-first'},
        {key: '8', value: 8, style: 'calculator-control-button'},
        {key: '9', value: 9, style: 'calculator-control-button'},
        {key: '*', value: '*', style: 'calculator-control-button orange'},
        {key: '4', value: 4, style: 'calculator-control-button border-first'},
        {key: '5', value: 5, style: 'calculator-control-button'},
        {key: '6', value: 6, style: 'calculator-control-button'},
        {key: '-', value: '-', style: 'calculator-control-button orange'},
        {key: '1', value: 1, style: 'calculator-control-button border-first'},
        {key: '2', value: 2, style: 'calculator-control-button'},
        {key: '3', value: 3, style: 'calculator-control-button'},
        {key: '+', value: '+', style: 'calculator-control-button orange'},
        {key: '0', value: 0, style: 'calculator-control-button border-first button-wider'},
        {key: '.', value: '.', style: 'calculator-control-button'},
        {key: '=', value: '=', style: 'calculator-control-button orange'},
    ])

    const CorAC = value => {
        let btnsTmp = [...btns]
        btnsTmp[0].value = value
        setBtns(btnsTmp)
    }

    const handleCalBtn = value => {
        if (value === 'AC' || value === 'C') {
            setTerminal(0)
            setFormula('')
            setNum(0)
            setSymbol(true)

            if (value === 'C') CorAC('AC')
        }

        if (/\d/.test(value)) {
            if (num === '0' || num === 0) {
                setTerminal(value.toString())
                setNum(value.toString())
            } else {
                setTerminal(`${num}${value}`)
                setNum(`${num}${value}`)
            }
            setSymbol(true)

            if (btns[0].value === 'AC') CorAC('C')
        }

        if (value == '+/-') {
            if (num.indexOf('-') === -1) {
                setTerminal(`-${terminal}`)
                setNum(`-${num}`)
            } else {
                setTerminal(num.substring(1, num.length))
                setNum(num.substring(1, num.length))
            }
            setSymbol(true)
        }

        if (value == '.') {
            if (num == 0) {
                setTerminal('0.')
                setNum('0.')
            } else if (num.indexOf('.') === -1) {
                setTerminal(`${terminal}${value}`)
                setNum(`${num}${value}`)
            }
            setSymbol(true)

            if (btns[0].value === 'AC') CorAC('C')
        }

        if (value === '+' || value === '-' || value === '*' || value === '/' || value === '%') {
            if (symbol) {
                setFormula(formula + `${num}${value}`)
                setNum(0)
                setSymbol(false)
            }
        }

        if (value === '=') {
            let ret = eval(formula + `${num}`)
            setFormula('')
            setTerminal(ret.toString())
            setNum(ret)
        }
    }

    return (
        <div className="calculator">
            <div className="calculator-terminal">
                {terminal}
            </div>
            <div className="calculator-control">
                {btns.map(item =>
                    <div key={item.key} className={item.style} onClick={() => handleCalBtn(item.value)}>
                        {item.value}
                    </div>
                )}
            </div>
        </div>
    )
}

export default App